import React, { Component } from 'react'

export default class index extends Component {
    myRef = React.createRef()
    showData() {
        const { input1 } = this.refs
        alert(input1.value)
    }
    showDataBlur() {
        const { input2 } = this.refs
        alert(input2.value)
    }
    showDataBlur2() {
        const { input3 } = this
        alert(input3.value)
    }

    showDataBlur3() {
        alert(this.myRef.current.value)
    }

    render() {
        return (
            <div>
                <h1>refs的使用</h1>
                {/* 第一种ref写法 */}
                <input ref="input1" type="text" placeholder="点击按钮显示的数据" />
                <button ref="button" onClick={this.showData.bind(this)}>点击显示左侧的数据</button>
                <input ref="input2" onBlur={this.showDataBlur.bind(this)} type="text" placeholder="失去焦点提示的数据" />
                {/* 第二种ref写法 */}
                <input ref={currentNode => this.input3 = currentNode} onBlur={this.showDataBlur2.bind(this)} type="text" placeholder="失去焦点提示的数据" />
                {/* 第三种ref写法 */}
                <input ref={this.myRef} onBlur={this.showDataBlur3.bind(this)} type="text" placeholder="失去焦点提示的数据" />
            </div>
        )
    }
}
